<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章详情</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-container>
            <el-header>{{ article.title }}</el-header>
            <el-main style="min-height: 80vh">{{ article.text }}</el-main>
            <div v-for="fileUrl in filesUrls">
                <el-image :src="fileUrl"></el-image>
            </div>
            <el-footer>
                <div>
                    当前点赞数:{{ likesNum }}
                </div>
                <el-row>
                    <el-button type="primary" @click="collectUser">关注作者:{{ authorName }}</el-button>
                    <el-button type="primary" @click="likes">点赞</el-button>
                    <el-button type="primary" @click="collectArticle">收藏文章</el-button>
                </el-row>
                <el-form label-width="80px" :model="myComment">
                    <el-form-item label="评论">
                        <el-input v-model="myComment.comment"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="inputComment">发表评论</el-button>
                    </el-form-item>
                </el-form>
                <div v-for="(comment,index) in comments" :key="index">
                    <el-descriptions title="评论">
                        <el-descriptions-item label="用户">{{ commentUsernames[index] }}
                        </el-descriptions-item>
                        <el-descriptions-item label="评论">{{ comment.comment }}</el-descriptions-item>
                        <el-descriptions-item label="时间">{{ getTime(comment.commentTime) }}</el-descriptions-item>
                    </el-descriptions>
                    <div v-for="(reply,index) in replys" :key="index">
                        <el-descriptions title="回复" v-show="comment.id===reply.commentId">
                            <el-descriptions-item label="用户">{{ replyUsernames[index] }}
                            </el-descriptions-item>
                            <el-descriptions-item label="回复">@{{ReplyUsername[index]+':'+reply.reply }}
                            </el-descriptions-item>
                            <el-descriptions-item label="时间">{{ getTime(reply.replyTime) }}</el-descriptions-item>
                        </el-descriptions>
                        <el-row v-show="comment.id===reply.commentId">
                            <el-button type="danger" v-show="user.id===reply.userId" @click="deleteReply(reply.id)">
                                删除回复
                            </el-button>
                            <el-button type="primary" @click="lookUser(reply.userId)">查看用户</el-button>
                            <el-button type="primary" @click="clickReply(replyUserIds[index],comment.id)">回复
                            </el-button>
                        </el-row>
                    </div>
                    <el-row>
                        <el-button type="danger" v-show="user.id===comment.commentId"
                                   @click="deleteComment(comment.id)">删除
                        </el-button>
                        <el-button type="primary" @click="lookUser(comment.commentId)">查看用户</el-button>
                        <el-button type="primary" @click="clickReply(comment.commentId,comment.id)">回复</el-button>
                        <el-dialog title="回复" :visible.sync="reply">
                            <el-form :model="myReply">
                                <el-form-item label="回复">
                                    <el-input v-model="myReply.reply" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="reply=false">取消</el-button>
                                <el-button type="primary" @click="uploadReply()">回复</el-button>
                            </div>
                        </el-dialog>
                    </el-row>
                </div>
            </el-footer>
        </el-container>

    </template>
</div>

<script src="js/axios-0.18.0.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                ReplyUsername: [],
                thisCommentId: '',
                replyUserIds: [],
                thisId: '',
                middleForm: {
                    user: {
                        id: '',
                        username: '',
                        email: '',
                        phone: '',
                        headImage: '',
                        password: ''
                    }
                },
                commentUsernames: [],
                replyUsernames: [],
                reply: false,
                myReply: {
                    reply: ''
                },
                replys: [],
                commentIds: [],
                filesUrls: [],
                likesNum: '',
                article: '',
                authorName: '',
                user: {
                    id: '',
                    username: ''
                },
                comments: [],
                myComment: {
                    comment: ''
                },
            }
        }, async mounted() {
            let search = location.search;
            let urlParams = new URLSearchParams(search);
            this.article = JSON.parse(urlParams.get('article'));
            this.user.id = JSON.parse(urlParams.get('id'));
            this.getAuthor()
            this.getLikesNum();
            this.getFiles();
            await this.getComment();
            await this.forIds();
        },
        methods: {
            clickReply(userId, commentId) {
                this.thisCommentId = commentId;
                this.reply = true;
                this.thisId = userId;
            },
            lookUser(userId) {
                location.href = "user.html?id=" + JSON.stringify(userId) + '&userId=' + JSON.stringify(this.user.id);
            },
            collectUser() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/collect/collectUser",
                    data: {
                        userId: _this.user.id,
                        collectId: _this.article.createrId
                    }
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert("收藏成功");
                    } else {
                        alert("收藏失败");
                    }
                });
            },
            getAuthor() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/user/getUser?userId=" + _this.article.createrId
                }).then(function (resp) {
                    _this.authorName = resp.data.data[0].username;
                });
            },
            deleteReply(replyId) {
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/reply/deleteReply",
                    data: replyId
                }).then(function (resp) {
                    console.log(resp.data.msg);
                    alert("删除成功");
                });
            },
            forIds() {
                var list = this.commentIds;
                list.forEach(item => {
                    this.getReplys(item);
                });
            },
            getReplys(commentId) {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/reply/getReply?commentId=" + commentId
                }).then(function (resp) {
                    console.log(resp.data.msg);
                    let replyUserIds = [];
                    let thisReply = [];
                    let thisUsername = [];
                    let ReplyUsername = [];
                    var replyView = resp.data.data[0];
                    for (let i = 0; i < replyView.length; i++) {
                        thisReply.push(replyView[i].reply);
                        thisUsername.push(replyView[i].username);
                        replyUserIds.push(replyView[i].userId);
                        ReplyUsername.push(replyView[i].replyUsername);
                    }
                    _this.replys = _this.replys.concat(thisReply);
                    _this.replyUsernames = _this.replyUsernames.concat(thisUsername);
                    _this.replyUserIds = _this.replyUserIds.concat(replyUserIds);
                    _this.ReplyUsername = _this.ReplyUsername.concat(ReplyUsername);
                });
            },
            uploadReply() {
                this.reply = false;
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/reply/uploadReply",
                    data: {
                        commentId: _this.thisCommentId,
                        userId: _this.user.id,
                        reply: _this.myReply.reply,
                        replyUser: _this.thisId
                    }
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        console.log(resp.data.msg);
                        alert("回复成功");
                    } else if (resp.data.msg === 'danger') {
                        alert("含有敏感词")
                    }
                })

            },
            getTime(min) {
                let newDate = new Date();
                newDate.setTime(min);
                return newDate.toDateString();
            },
            inputComment() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/comment/inputComment",
                    data: {
                        userId: _this.user.id,
                        comment: _this.myComment.comment,
                        articleId: _this.article.id
                    }
                }).then(function (resp) {
                    console.log(resp.data.msg);
                    if (resp.data.msg === "success") {
                        alert("评论成功");
                    } else if (resp.data.msg === 'danger') {
                        alert("你的评论含有违禁词");
                    }
                });
            },
            deleteComment(id) {
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/comment/deleteComment",
                    data: id
                }).then(function (resp) {
                    console.log(resp.data.msg);
                    if (resp.data.msg === "success") {
                        alert("删除成功");
                    }
                });
            },
            //点赞
            likes() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/likes/clickLikes",
                    data: {
                        likeId: _this.user.id,
                        articleId: _this.article.id
                    }
                }).then(function (resp) {
                    console.log(resp.data.msg);
                    _this.getLikesNum();
                });
            },
            //获得当前点赞数
            getLikesNum() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/webdemo/method/likes/getLikes",
                    data: _this.article.id
                }).then(function (resp) {
                    _this.likesNum = resp.data.data[0];
                });
            },
            getFiles() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/article/getImage?articleId=" + _this.article.id
                }).then(function (resp) {
                    _this.filesUrls = resp.data.data[0];
                    console.log(resp.data.msg);
                });
            },
            async getComment() {
                var _this = this;
                await axios({
                    method: "get",
                    url: "http://localhost:8080/webdemo/method/comment/getComment?articleId=" + _this.article.id
                }).then(function (resp) {
                    _this.comments = [];
                    _this.commentUsernames = [];
                    _this.commentIds = [];
                    var commentView = resp.data.data[0];
                    for (let i = 0; i < commentView.length; i++) {
                        let aObject = commentView[i];
                        _this.comments.push(aObject.comment);
                        _this.commentUsernames.push(aObject.username);
                        _this.commentIds.push(aObject.comment.id);
                    }
                    console.log(resp.data.msg);
                });
            },
            collectArticle() {
                var _this = this;
                axios({
                    method: "post",
                    url: 'http://localhost:8080/webdemo/method/collect/collectArticle',
                    data: {
                        userId: _this.user.id,
                        articleId: _this.article.id
                    }
                }).then(function (resp) {
                    if (resp.data.msg === 'success') {
                        alert("收藏成功");
                    } else {
                        alert("收藏失败");
                    }
                });
            }
        }


    })
</script>
</body>
</html>